<template>
  <div class="father">
    <con-swiper :key="dyarr.length">
      <con-swiper-item
        v-for="data in dyarr"
        :key="data.typeid"
        @click="handleClick(inzdex)"
      >
        <div
          class="inner"
          :style="{ backgroundImage: 'url(' + data.image + ')' }"
        ></div>
      </con-swiper-item>
    </con-swiper>

    <fixed>
      <div class="fix">
        <img :src="teachinfo.avatar" alt="" />
        <p>{{ teachinfo.nickname }}</p>
        <p>
          {{ teachinfo.age }}&nbsp;| &nbsp;{{ teachinfo.city }}&nbsp;|&nbsp;{{
            teachinfo.RefreshTime
          }}
        </p>
      </div>
    </fixed>

    <con-header></con-header>
    <router-view></router-view>

    <foot class="bottom"></foot>
    <clickhome style="z-index:99999"></clickhome>
  </div>
</template>
<script>
import getJson from '../directive/getjson'
import conSwiper from '../components/content/ConSwiper.vue'
import conSwiperItem from '../components/content/ConSwiperItem.vue'
import conHeader from '../components/content/ConHeader.vue'
import fixed from '../components/content/Fixed.vue'
import foot from '../components/content/Foot.vue'
import { ImagePreview } from 'vant'
import clickhome from '../components/headers/clickHome.vue'
// import { filterFiles } from 'vant/lib/uploader/utils'
export default {
  data () {
    return {
      dyarr: [],
      teachinfo: [],
      id: 0,
      photos: []
    }
  },
  components: {
    // getJson,
    conSwiper,
    conSwiperItem,
    conHeader,
    fixed,
    foot,
    clickhome
  },
  methods: {
    handleClick (index) {
      ImagePreview({
        images: this.photos,
        startPosition: index
      })
    }
  },
  mounted () {
    this.id = location.href.match(/id=(\d+)/)[1]
    // console.log(this.id)

    getJson(
      `https://yapi.tuwan.com/Content/getContentApi/?id=${this.id}&callback=_jsonpda6n1ssnw3b`,
      res => {
        // console.log(res)
        // this.datalist = res
        this.dyarr = res.dyarr
        this.teachinfo = res.teachinfo
        this.photos = res.dyarr.map(item => item.image)
        // console.log(this.photos)
        // console.log(res.dyarr)
      }
    )
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
body,
html {
  height: 100%;
  font-size: 16px;
}
.inner {
  height: 240px;
  width: 100%;
  position: relative;
  background-position: center center;
  background-size: 100%;

  .box {
    width: 100px;
    height: 50px;
    background: #f00;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1000;
  }
}
.father {
  position: relative;
}
.fix {
  position: absolute;
  width: 300px;
  height: 40px;
  top: 190px;
  left: 0px;
  z-index: 10;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  img {
    width: 40px;
    border-radius: 50%;
    margin: 0px 6px;
    float: left;
  }
}
.swiper-pagination {
  text-align: right;
}
.bottom {
  position: fixed;
  background: #f00;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 50px;
}
</style>
